<template>
  <div class="scroll-container">
    <el-scrollbar style="height: 100%">
      <el-card class="box-card" v-for="job in jobs" :key="job.id" @click.native="handleClick(job)">
        <JobCard :job-data="job"></JobCard>
      </el-card>
    </el-scrollbar>
  </div>
</template>

<script>
import JobCard from "./jobCard.vue";
import pubsub from "pubsub-js";

export default {
  components: {JobCard},
  name: "JobAside",
  data() {
    return {
      jobs: [], // 用于存储岗位数据
    };
  },
  methods: {
    // 当JobCard被点击时，通过pubsub发布岗位数据
    handleClick(job) {
      console.log('我被点击了');
      console.log('我要发送的数据是', job);
      pubsub.publish("selectedJob", job);
    },

  },
  mounted() {
    // 订阅岗位信息
    this.jobsId = pubsub.subscribe("jobs", (msg, data) => {
      this.jobs = data;
      console.log('我aside收到了jobs', this.jobs);
      if(this.jobs.length > 0){
        this.handleClick(this.jobs[0])
      }
    });
  },
  beforeDestroy() {
    // 在组件销毁前取消订阅，避免内存泄漏
    pubsub.unsubscribe(this.jobsId);
  },
};
</script>

<style scoped>
.scroll-container {
  height: 800px; /* 设置一个固定高度，或者根据需要调整 */
  width: 600px;
  overflow: hidden;
}

.box-card {
  width: 480px;
}
</style>
